<style>
	page{
		background: #fafafa;
	}
    .m-header-line {
        border: 1upx solid #e5e5e5;
    }
	
    .red {
        background: #ff413e;
    }

    .orange {
        background: #ff9b12;
    }

    .blue {
        background: #33b7e7;
    }

    .purple {
        background: #917be4;
    }

    .gray {
        background: #4b4b4b;
    }

    .g-content-box {
        width: 100%;
        overflow: hidden;
		padding-bottom: 100upx;
    }

    .m-log {
        width: 90%;
        margin: 0 auto;
        height: 100%;
    }

    .m-log-list {
        width: 100%;
		position: relative;
		padding-top: 20upx;
    }

    .m-log-line {
		position: absolute;
		top: 26upx;
        width: 6upx;
        height: 37upx;
        margin-right: 42upx;
    }

    .m-log-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
        width: 92%;
		margin-left: 40upx;
		padding-bottom: 20upx;
        border-bottom: 1px solid #e5e5e5;
    }

    .u-log-title {
        font-size: 32upx;
    }

    .u-log-date {
        font-size: 24upx;
        color: #aaa;
    }

    .m-log-info-r .money{
        font-size: 32upx;
        font-weight: bold;
		text-align: right;
    }
	
	.m-log-info-r .havemoney{
	    font-size: 24upx;
		text-align: right;
	}
	
    .f-log-plus {
        color: #ff4e00;
    }

    .f-log-minus {
        color: #4b4b4b;
		font-weight: bold;
    }

    .g-frame {
        width: 581upx;
        height: 729upx;
        background: #fff;
        border-radius: 20upx;
        position: fixed;
        top: 20%;
        overflow: hidden;
        left: 12%;
		z-index: 12;
    }

    .g-frame-mask {
        background: #000;
        opacity: .5;
        height: 100vh;
        width: 100%;
        position: fixed;
        top: 0upx;
		z-index: 11;
    }

    .m-frame-header {
        height: 110upx;
        width: 100%;
        background: #d71311;
        border-top-right-radius: 20upx;
        border-top-left-radius: 20upx;
    }

    .u-frame-title {
        width: 60%;
        height: 100%;
        text-align: right;
        color: #fff;
        line-height: 110upx;
        font-size: 32upx;
        float: left;
    }

    .u-frame-close {
        float: right;
        width: 42upx;
        height: 42upx;
        background-size: 100%;
        position: relative;
        top: 34upx;
        right: 32upx;
    }

    .m-frame-content {
        width: 100%;
        height: 100%;
    }

    .m-frame-box {
        width: 505upx;
        margin: 0 auto;
        padding-top: 48upx;
        height: 480upx;
        overflow-y: auto;
    }

    .m-frame-date-box {
        height: 107upx;
        width: 100%;
    }

    .m-frame-date-box-t {
        height: 25upx;
        margin-bottom: 16upx;
    }

    .u-frame-date-line {
        float: left;
        width: 5upx;
        height: 20upx;
        background: #d71311;
        margin-right: 12upx;
    }

    .u-frame-date-title {
        float: left;
        font-size: 26upx;
        position: relative;
        top: -6upx;
    }

    .m-frame-detail {
        overflow: hidden;
    }

    .m-date-l {
        height: 65upx;
        border: 2upx solid #e5e5e5;
        width: 235upx;
        border-radius: 8upx;
        display: inline-block;
    }

    .u-date {
        font-size: 28upx;
        line-height: 65upx;
        float: left;
        padding-left: 25upx;
    }

    .u-date-icon {
        width: 26upx;
        height: 27upx;
        float: right;
        position: relative;
        right: 13upx;
        top: 19upx;
    }

    .m-date-line {
        background: #e7e7e7;
        width: 8upx;
        height: 3upx;
        float: left;
        position: relative;
        top: 31upx;
        left: 12upx;
        margin-right: 12upx;
    }

    .m-date-r {
        float: right;
    }

    .m-frame-category .m-date-l {
        margin-bottom: 33upx;
        margin-right: 26upx;
    }

    .m-frame-category .m-date-l:nth-of-type(even) {
        margin-right: 0px;
    }

    .u-category {
        font-size: 28upx;
        color: #a5a5a5;
        text-align: center;
        line-height: 65upx;
    }

    .u-category-act {
        border: 2upx solid #d71311;
    }

    .u-category-act .u-category {
        color: #d71311 !important;
    }

    .m-frame-footer {
        height: 97upx;
        width: 100%;
        position: absolute;
        bottom: 0px;
        left: 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
    }

    .m-frame-footer view {
		flex: 1;
        line-height: 97upx;
        text-align: center;
        font-size: 32upx;
    }

    .u-reset {
        color: #ff0000;
        background: #fff;
    }

    .u-confirm {
        background: #d71311;
        color: #fff;
        border-bottom-right-radius: 16upx;
    }

    .m-frame-date-box-bottom2 {
        display: flex;
        justify-content: space-between;
    }

    .f-border1px {
        position: relative;
    }
	.kd-turn{
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		color: #ffffff;
		background: #d71611;
		text-align: center;
		font-size: 32upx;
		padding: 25upx 0;
	}
	.ture-content{
		font-size: 32upx;
	}
	.ture-content .input{
		padding: 30upx 0;
	}
	.ture-content .input input{
		width: 99%;
		font-size: 40upx;
		text-align: center;
		border: 1px solid #828080;
		border-radius: 10upx;
		padding: 20upx 0;
	}
	.ture-content .tips .red{
		color: #D71511;
		margin-right: 10upx;
		background:none;
	}
	.ture-content .tips .icon{
		margin:0 10upx;
	}
	.ture-content .num{
		font-size: 38upx;
		color: #D71511;
	}
	.item-deital{
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -320upx;
		background: #ffffff;
		border-radius: 3px;
		box-shadow: 0 0 5px rgba(0, 0, 0, .2);
		width: 600upx;
		padding: 20upx;
		z-index: 12;
		animation:show .3s;
		animation-fill-mode:forwards;
	}
	.item-deital .order-title{
		color: #333333;
		padding: 10upx 0;
		font-size: 32upx;
	}
	.item-deital .price{
		color: #D71511;
		font-size: 36upx;
		font-weight: bold;
	}
	.item-deital .fex{
		padding: 5upx 0;
		font-size: 32upx;
	}
	.deital-close{
		padding: 5px;
		border-radius: 100px;
		border: 3px solid #fff;
		position: absolute;
		bottom: -60px;
		left: 50%;
		transform: translateX(-50%);
	}
	@keyframes show  
    {  
        from {transform: translateY(-100%); }  
        to { transform: translateY(-50%);}  
    }  
</style>
<template>
    <view>
        <view class="g-content-box">
            <view class="m-log">
                <view class="m-log-list" v-for="(item, index) in data" :key="index">
                	<view class="m-log-line" :class="[item.way == 1 ? 'red' : 'gray']"></view>
                	<view class="m-log-info">
                		<view class="m-log-info-l">
                			<view class="u-log-title">{{item.remark}}({{item.is_accept_text}})</view>
                			<view class="u-log-date">{{item.create_time}}</view>
                		</view>
                		<view class="m-log-info-r">
                			<view class="money" :class="[item.way == 1 ? 'f-log-plus' : 'f-log-minus']">{{item.way == 1 ? '+'+item.amount : '-'+item.amount}}</view>
                		</view>
                	</view>
                </view>
               
                <view class="m-b-loading" v-if="showLoading">
                    <image src="../../../static/images/loading2.gif" mode="widthFix"></image>
                    <text>加载中</text>
                </view>
				
            </view>
        </view>
		
        <view class="m-no-data" v-if="showNodata">
            <image src="../../../static/images/no_data.png" mode="widthFix"></image>
        </view>
    </view>
</template>

<script>
	import henglang from '@/common/common_zb.js';
    export default {
        data() {
            return {
                showLoading: false,
                showNodata: false,
                data: [],
				page:1,
				total_pages:1,
				deitalInfo:[]
            };
        },
        methods: {
            request(type) {
				let that = this;
				that.showLoading = true;
				if(that.page <= that.total_pages){
					henglang.get('transfer/transfer_log',{},true,function(res){
						that.showLoading = false;
						if (!res.data.data.length) { 
							that.data = []
							that.showNodata = true;
							return false;
						}else{
							that.showNodata = false;
						}
						if (type == 'plus') {
							that.data = that.data.concat(res.data.data);
						} else {
							that.data = res.data.data;
							that.total_pages = res.data.total_pages;
						}
					});
				}
            }
        },
		onLoad() {
			this.request();
		},
        onReachBottom() {
			this.page += 1
            this.request('plus');
        }
    }
</script>
